<template>
    <div class="parallax-animation" ref="containerRef">
        <div class="illustration" ref="illustrationRef">
            <img src="./images/background.jpg" alt="" class="illustration__layer-background item" />
            <img src="./images/Moon.png" alt="" class="illustration__layer-moon item" />
            <img src="./images/Clouds.png" alt="" class="illustration__layer-clouds item" />
            <img src="./images/Layer7.png" alt="" class="illustration__layer-seven item" />
            <img src="./images/Layer6.png" alt="" class="illustration__layer-six item" />
            <img src="./images/Layer5.png" alt="" class="illustration__layer-five item" />
            <img src="./images/Layer4.png" alt="" class="illustration__layer-four item" />
            <img src="./images/Layer3.png" alt="" class="illustration__layer-three item" />
            <img src="./images/Layer2.png" alt="" class="illustration__layer-two item" />
            <img src="./images/Layer1.png" alt="" class="illustration__layer-one item" />
        </div>
        <div class="content">
            <section class="main-section">
                <h1 class="content__title">
                    <span class="content__title-text">Lorem Ipsum</span>
                </h1>
                <p class="content__text">
                    Lorem Ipsum，也称乱数假文或者哑元文本，
                    是印刷及排版领域所常用的虚拟文字。由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书，Lorem
                    Ipsum从西元15世纪起就被作为此领域的标准文本使用。它不仅延续了五个世纪，还通过了电子排版的挑战，其雏形却依然保存至今。在1960年代，”Leatraset”公司发布了印刷着Lorem
                    Ipsum段落的纸张，从而广泛普及了它的使用。最近，计算机桌面出版软件”Aldus
                    PageMaker”也通过同样的方式使Lorem Ipsum落入大众的视野。
                </p>
                <p class="content__text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non rhoncus leo. Cras vel maximus
                    ex. Sed eu accumsan massa, vel consectetur leo. Aliquam lobortis consectetur neque, at maximus lacus
                    efficitur at. Nulla porttitor, risus vitae pharetra tincidunt, felis purus cursus dui, ac mollis
                    lacus quam at mi. Curabitur tempus nunc et lorem sagittis vestibulum. Mauris id nisi gravida,
                    sodales massa a, facilisis sapien. Integer convallis nunc non magna fermentum fringilla. Fusce
                    suscipit elit in hendrerit semper. Orci varius natoque penatibus et magnis dis parturient montes,
                    nascetur ridiculus mus. Fusce cursus placerat elit et molestie. Orci varius natoque penatibus et
                    magnis dis parturient montes, nascetur ridiculus mus. Nulla laoreet quam risus, non dapibus risus
                    malesuada dapibus. Nunc cursus elit libero, cursus placerat nulla luctus hendrerit. Maecenas lectus
                    lorem, pulvinar sit amet sapien vitae, sollicitudin elementum nibh.
                </p>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";

const containerRef = ref<HTMLDivElement>();
const illustrationRef = ref<HTMLDivElement>();

onMounted(() => {
    containerRef.value!.addEventListener("scroll", onScroll);
});
onUnmounted(() => {
    // containerRef.value!.removeEventListener("scroll", onScroll);
});

// 滚动距离
const scrollY = ref(0);
const onScroll = () => {
    scrollY.value = containerRef.value?.scrollTop as number;
    const illustration = illustrationRef.value as HTMLDivElement;
    (illustration.children.item(2) as HTMLImageElement).style.transform = `translateY(${scrollY.value}px)`;
    (illustration.children.item(3) as HTMLImageElement).style.transform = `translateY(${scrollY.value * 0.9}px)`;
    (illustration.children.item(4) as HTMLImageElement).style.transform = `translateY(${scrollY.value * 0.8}px)`;
    (illustration.children.item(5) as HTMLImageElement).style.transform = `translateY(${scrollY.value * 0.4}px)`;
    (illustration.children.item(6) as HTMLImageElement).style.transform = `translateY(${scrollY.value * 0.3}px)`;
    (illustration.children.item(7) as HTMLImageElement).style.transform = `translateY(${scrollY.value * 0.2}px)`;
    (illustration.children.item(8) as HTMLImageElement).style.transform = `translateY(${scrollY.value * 0.05}px)`;
    (illustration.children.item(9) as HTMLImageElement).style.transform = `translateY(${scrollY.value * -0.2}px)`;
};
</script>

<style scoped lang="scss">
.parallax-animation {
    position: relative;
    height: 100%;
    overflow: auto;
    background-color: #1b0404;
    .illustration {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .item {
            position: absolute;
            width: 110%;
            object-fit: cover;
            margin-left: -50px;
            overflow: hidden;
        }
        .illustration__layer-moon {
            bottom: 36%;
            left: 37%;
            width: 41%;
        }
        .illustration__layer-clouds {
            bottom: 500px;
        }
        .illustration__layer-seven {
            bottom: 360px;
        }
        .illustration__layer-six {
            bottom: 415px;
        }
        .illustration__layer-five {
            bottom: 370px;
        }
        .illustration__layer-four {
            bottom: 330px;
        }
        .illustration__layer-three {
            bottom: 250px;
        }
        .illustration__layer-two {
            bottom: -10px;
        }
        .illustration__layer-one {
            bottom: -30px;
        }
    }
    .content {
        background-color: #1b0404;
        .main-section {
            width: 60%;
            padding-bottom: 150px;
            margin: auto;
            .content__title {
                height: 200px;
                margin: auto;
                font-size: 60px;
                font-weight: bold;
                color: #d9c1a5;
                text-align: center;
                .content__title-text {
                }
            }
            .content__text {
                margin-bottom: 30px;
                font-size: 16px;
                line-height: 1.9;
                color: #a08c6c;
                text-align: justify;
            }
        }
    }
}
</style>
